<template>
  <div class="statistics-container">
    <h1>统计数据</h1>

    <div class="chart-and-table">
      <!-- 显示分类销量表格 -->
      <div class="table-wrapper">
        <table v-if="salesData.length" class="sales-table">
          <thead>
            <tr>
              <th>分类</th>
              <th>销量</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in salesData" :key="index" :class="{ 'even-row': index % 2 === 0 }">
              <td>{{ item.categoryName }}</td>
              <td>{{ item.salesVolume }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 添加一个 canvas 元素用于绘制饼状图 -->
      <div class="chart-wrapper">
        <canvas ref="chartCanvas" width="450" height="450"></canvas>
      </div>
    </div>

    <!-- 添加一个 canvas 元素用于绘制折线图 -->
    <div class="line-chart-wrapper">
      <canvas ref="lineChartCanvas" width="700" height="350"></canvas>
    </div>
  </div>
</template>

<script>
import { Chart, registerables } from 'chart.js';
import {getStatisticsApi} from "@/api/ProductApi";

Chart.register(...registerables);

export default {
  data() {
    return {
      salesData: [], // 销量数据
      lineChartData: { // 折线图数据
        labels: [],
        datasets: [
          {
            label: '日销量',
            data: [],
            borderColor: '#36A2EB',
            fill: false,
            tension: 0.1
          }
        ]
      }
    };
  },
  mounted() {
    // 在组件挂载时获取统计数据并初始化图表
    this.loadStatistics();
    this.loadLineChartData();
  },
  methods: {
    loadStatistics() {
      getStatisticsApi().then(res=>{
        if (res.data.code==1){
          this.salesData = res.data.data;
          this.drawPieChart();
        }
      })


    },
    drawPieChart() {
      const canvas = this.$refs.chartCanvas;
      const ctx = canvas.getContext('2d');

      // 设置颜色
      const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'];

      // 准备数据
      const data = {
        labels: this.salesData.map(item => item.categoryName),
        datasets: [{
          data: this.salesData.map(item => item.salesVolume),
          backgroundColor: colors
        }]
      };

      // 创建饼状图
      new Chart(ctx, {
        type: 'pie',
        data: data,
        options: {
          responsive: true,
          plugins: {
            legend: {
              position: 'top',
              labels: {
                color: '#333'
              }
            },
            title: {
              display: true,
              text: '分类销量分布',
              color: '#333',
              font: {
                size: 24,
                weight: 'bold'
              }
            }
          }
        }
      });
    },
    loadLineChartData() {
      // 创建假数据
      const dailySales = [
        { date: '2024-11-20', sales: 290 },
        { date: '2024-11-21', sales: 240 },
        { date: '2024-11-22', sales: 210 },
        { date: '2024-11-23', sales: 221 },
        { date: '2024-11-24', sales: 250 },
        { date: '2024-11-25', sales: 240 },
        { date: '2024-11-26', sales: 254 },
        { date: '2024-11-27', sales: 260 },
        { date: '2024-11-28', sales: 270 },
        { date: '2024-11-29', sales: 280 },
        { date: '2024-11-30', sales: 290 },
        { date: '2024-12-01', sales: 250 },
        { date: '2024-12-02', sales: 240 },
        { date: '2024-12-03', sales: 270 },
        { date: '2024-12-04', sales: 280 },
        { date: '2024-12-05', sales: 220 },
        { date: '2024-12-06', sales: 210 },
        { date: '2024-12-07', sales: 220 },
        { date: '2024-12-08', sales: 230 },
        { date: '2024-12-09', sales: 240 },
        { date: '2024-12-10', sales: 250 },
        { date: '2024-12-11', sales: 260 },
        { date: '2024-12-12', sales: 310 }
      ];

      this.lineChartData.labels = dailySales.map(item => item.date);
      this.lineChartData.datasets[0].data = dailySales.map(item => item.sales);

      this.drawLineChart();
    },
    drawLineChart() {
      const canvas = this.$refs.lineChartCanvas;
      const ctx = canvas.getContext('2d');
      new Chart(ctx, {
        type: 'line',
        data: this.lineChartData,
        options: {
          responsive: true,
          plugins: {
            legend: {
              position: 'top',
              labels: {
                color: '#333'
              }
            },
            title: {
              display: true,
              text: '日销量趋势',
              color: '#333',
              font: {
                size: 24,
                weight: 'bold'
              }
            }
          },
          scales: {
            x: {
              grid: {
                color: '#ddd',
                lineWidth: 1
              },
              ticks: {
                color: '#333',
                font: {
                  size: 14
                }
              }
            },
            y: {
              grid: {
                color: '#ddd',
                lineWidth: 1
              },
              ticks: {
                color: '#333',
                font: {
                  size: 14
                }
              }
            }
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.statistics-container {
  text-align: center;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.statistics-container:hover {
  transform: translateY(-5px);
}

.chart-and-table {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
}

.chart-wrapper, .table-wrapper {
  flex: 1;
  margin: 0 5px; /* 减少外边距 */
  border: 1px solid #ddd; /* 减少边框宽度 */
  border-radius: 8px; /* 减少圆角半径 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 减少阴影模糊度 */
  transition: transform 0.3s ease;
  padding: 15px; /* 减少内边距 */
  background-color: #ffffff;
}

.chart-wrapper:hover, .table-wrapper:hover {
  transform: scale(1.02);
}

canvas {
  display: block;
  margin: 0 auto;
  /*width: 80%; !* 确保 canvas 宽度适应容器 *!*/
}

.sales-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: none;
  font-size: 16px; /* 增加字体大小 */
}

.sales-table th, .sales-table td {
  border: 1px solid #ddd;
  padding: 12px; /* 减少内边距 */
  text-align: center;
  transition: background-color 0.3s ease;
}

.sales-table th {
  background: linear-gradient(to right, #3498db, #2ecc71);
  color: #fff;
}

.sales-table tr.even-row {
  background-color: #f9f9f9;
}

.sales-table tr:hover {
  background-color: #e0e0e0;
}

.line-chart-wrapper {
  margin: 20px 0;
  border: 1px solid #ddd; /* 减少边框宽度 */
  border-radius: 8px; /* 减少圆角半径 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 减少阴影模糊度 */
  transition: transform 0.3s ease;
  padding: 15px; /* 减少内边距 */
  background-color: #ffffff;
  width: 100%;
  max-width: 800px; /* 确保容器不会超过最大宽度 */
}

.line-chart-wrapper:hover {
  transform: scale(1.02);
}

@media (max-width: 768px) {
  .statistics-container {
    padding: 20px;
  }

  .chart-and-table {
    flex-direction: column; /* 在小屏幕上变为垂直排列 */
  }

  .chart-wrapper, .table-wrapper, .line-chart-wrapper {
    margin: 10px 0;
    padding: 10px;
    width: 100%;
  }

  .sales-table {
    width: 100%;
  }
}
</style>
